<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html> 
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]--> 
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]--> 
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]--> 
<!-- BEGIN HEAD --> 
<head> 
	<title>计时系统 - Bone</title>
	<meta content="width=device-width, initial-scale=1.0" name="viewport" /> 
	<%@ include file="/common/css.jsp"%>
	<link href="${ctx}/resource/css/promo.css" rel="stylesheet" type="text/css"/> 
	<link href="${ctx}/resource/css/animate.css" rel="stylesheet" type="text/css"/> 
</head>
<style type="text/css">
	.relogio{width:330px;height:330px;margin:0px auto 0 auto;}
</style>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed page-full-width">
	<!-- BEGIN HEADER -->
	<%@ include file="/common/header.jsp"%>

	<!-- END HEADER -->
	<!-- BEGIN CONTAINER -->
	<div class="page-container row-fluid">
		<!-- BEGIN PAGE -->
		<div class="page-content no-min-height">
			<!-- BEGIN PAGE CONTAINER-->
			<div class="container-fluid promo-page">
				<!-- BEGIN PAGE CONTENT-->
				<form id="listForm" action="${ctx}/timer/index.do" method="post">
					<div class="row-fluid">
						<div class="span12">
							<div class="block-grey">
								<div class="container-fluid">
									<div id="promo_carousel" class="carousel slide">
										<div class="carousel-inner">

											<div class="active item">
												<div class="row-fluid">
													<div class="span2"></div>
													<div
														class="span4 margin-bottom-20 margin-top-20 animated rotateInUpRight">
														<h1>
															欢迎光临 <br>TIMER <font color="#D84A38">SYSTEM</font>
														</h1>
														<p>本系统主要提供的是功能是：计时，倒计时</p>
														<!-- <p>Lunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero consectetur adipiscing elit magna. Sed et quam lacus. Fusce condimentum eleifend enim a feugiat.</p> -->
														<a href="${ctx}/timer/stopwatch/simple.do"
															class="btn red big xlarge"> 新建计时 <i
															class="icon-file-alt m-icon-white"></i>
														</a>
														<a href="${ctx}/timer/countdown/classics.do"
															class="btn green big xlarge"> 新建倒计时 <i
															class="icon-file-alt m-icon-white"></i>
														</a> 
													</div>
													<div class="span4 animated rotateInDownLeft">
														<a href="${ctx}/timer/index.do">
															<div style=" width: 425px; text-align: center">
																<div class="relogio"></div>
															</div>
														</a>
													</div>

												</div>
											</div>

											<div class="item">
												<div class="row-fluid">
													<div class="span2"></div>
													<div class="span4 animated rotateInUpRight">
														<a href="${ctx}/timer/index.do">
															<div style="width:420px;margin:0px auto 0 auto;">
																<object width="420" height="325"  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553544800">
																	<param value="${ctx}/resource/flash/flash3378.swf" name="movie">
																	<param value="high" name="quality">
																	<param value="transparent" name="wmode">
																	<embed width="420" height="325" wmode="transparent" type="application/x-shockwave-flash"  quality="high" src="${ctx}/resource/flash/flash3378.swf">
																</object>
															</div>
														</a>
													</div>
													<div
														class="span4 margin-bottom-20 animated rotateInDownLeft">
														<h1>
															TIMER <font color="#D84A38">SYSTEM</font>
														</h1>
														<p>计时器，是利用特定的原理来测量时间的装置。</p>
														<p>倒计时器是由单片机为核心的器件组成的一个倒计时系统。系统显示器是由7位数字型数码管组成，分别显示时间值的分、秒和0.1秒，它能够通过小键盘阵列设定倒计时时间。当倒计时到，有蜂鸣器发出警报。</p>
														<a href="${ctx}/timer/stopwatch/simple.do"
															class="btn red big xlarge"> 新建计时 <i
															class="icon-file-alt m-icon-white"></i>
														</a>
														<a href="${ctx}/timer/countdown/classics.do"
															class="btn green big xlarge"> 新建倒计时 <i
															class="icon-file-alt m-icon-white"></i>
														</a> 
													</div>
													<div class="span2"></div>
												</div>
											</div>
										</div>
										<a class="carousel-control left" href="#promo_carousel"
											data-slide="prev"> <i
											class="m-icon-big-swapleft m-icon-white"></i>
										</a> <a class="carousel-control right" href="#promo_carousel"
											data-slide="next"> <i
											class="m-icon-big-swapright m-icon-white"></i>
										</a>
									</div>
								</div>
							</div>
							<div class="row-fluid " style="margin-top: 40px">

								<div class="span2"></div>
								<div class="span8">
									<!-- BEGIN SAMPLE TABLE PORTLET-->
									<div class="portlet box red">
										<div class="portlet-title">
											<div class="caption">
												<i class="icon-cogs"></i>最新计时
											</div>
											<div class="tools">
												<a href="javascript:;" class="collapse"></a>
											</div>
										</div>
										<div class="portlet-body">
											<table class="table table-hover">
												<thead>
													<tr>
														<th style="text-align: center; min-width: 30px">编号</th>
														<th>计时主题</th>
														<th style="text-align: center;">计时次数</th>
														<th style="text-align: center;">创建时间</th>
													</tr>
												</thead>
												<tbody>
													<c:forEach items="${dataInfo}" var="timer"
														varStatus="status">
														<tr>
															<td style="text-align: center;">${status.index+1}</td>
															<td
																title=" <vs:escape value='${timer.timerEvent.title}'/> ">
																<a
																href="${ctx}/timer/stopwatch/resullt.do?tid=${timer.timerEvent.id}"
												 				> <c:choose>
																		<c:when
																			test="${fn:length(timer.timerEvent.title) > 10}">
																			<vs:escape
																				value="${fn:substring(timer.timerEvent.title, 0, 10)}..." />
																		</c:when>
																		<c:otherwise>
																			<vs:escape value="${timer.timerEvent.title}" />
																		</c:otherwise>
																	</c:choose>
															</a>
															</td>

															<td style="text-align: center;">${timer.countNumber}</td>
															<td style="text-align: center;">${timer.createTime}</td>
														</tr>
													</c:forEach>
												</tbody>
											</table>
											<div align="center">
												<font size="2">共 ${page.totalPageCount} 页</font> <font
													size="2">第 ${page.pageNow} 页</font> <a
													href="${ctx}/timer/index.do?pageNow=1">首页</a>
												<c:choose>
													<c:when test="${page.pageNow - 1 > 0}">
														<a
															href="${ctx}/timer/index.do?pageNow=${page.pageNow - 1}">上一页</a>
													</c:when>
												</c:choose>
												<c:choose>
													<c:when test="${page.pageNow + 1 <= page.totalPageCount}">
														<a
															href="${ctx}/timer/index.do?pageNow=${page.pageNow + 1}">下一页</a>
													</c:when>
												</c:choose>
												<c:choose>
													<c:when test="${page.totalPageCount==0}">
														<a href="${ctx}/timer/index.do?pageNow=${page.pageNow}">尾页</a>
													</c:when>
													<c:otherwise>
														<a
															href="${ctx}/timer/index.do?pageNow=${page.totalPageCount}">尾页</a>
													</c:otherwise>
												</c:choose>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</form>
				<!-- END PAGE CONTENT-->
			</div>
		</div>
		<!-- END PAGE CONTAINER-->
	</div>
	<!-- END PAGE -->
	<!-- END CONTAINER -->
	
	<!-- BEGIN FOOTER1 -->
	<%@ include file="/common/footer.jsp"%>
	<!-- END FOOTER -->
	
	<!-- BEGIN JAVASCRIPTS -->
	<%@ include file="/common/js.jsp"%>
	<script src="${ctx}/resource/js/app.js"></script>
	<script src="${ctx}/resource/js/timerIndex.js"></script>
	<script>
		jQuery(document).ready(function() {
		   App.init();
		   jQuery('#promo_carousel').carousel({
		      interval: 10000,
		      pause: 'hover'
		   });
		});
	</script>
	<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>